<template>
  <div class="address">
    <div>
      <mt-field label="收货人" placeholder="请填写收货人姓名" v-model="username"></mt-field>
      <mt-field label="联系电话" placeholder="请填写手机号码" v-model="phone"></mt-field>
      <div @click="clickPicker">
        <mt-field label="所在地区" readonly :placeholder="myAddressProvince + '-' + myAddressCity + '-' + myAddresscounty"></mt-field>
      </div>
      <div  @click="clickPicker" class="ispicker" v-show="isPicker">
        <mt-picker :slots="myAddressSlots" @change="onValuesChange"></mt-picker>
      </div>
      <mt-field placeholder="详细地址" type="textarea" rows="3" v-model="address"></mt-field>
      <mt-cell style="margin:.1rem 0 .5rem" title="设置默认地址">
        <mt-switch v-model="checkbox"></mt-switch>
      </mt-cell>
      <mt-button @click="clickAddress" size="large" type="danger">保存</mt-button>
    </div>
    <public-menu></public-menu>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'mint-ui'
import PublicMenu from '../public/Menu'
import myaddress from '../../../static/json/area.json'
export default {
  name: 'AddressEdit',
  components: {
    PublicMenu
  },
  data () {
    return {
      isPicker: false,
      username: '',
      phone: '',
      address: '',
      checkbox: false,
      addressData: [],
      myAddressSlots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(myaddress),
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot4'
        }, {
          flex: 1,
          values: [],
          className: 'slot5',
          textAlign: 'center'
        }
      ],
      myAddressProvince: '省',
      myAddressCity: '市',
      myAddresscounty: '区/县'
    }
  },
  methods: {
    getInfo () {
      axios.get('/meimai/interface/address/getAddressDetail', {
        params: { memberId: this.$store.state.userId, addressId: this.$route.query.addressId }
      }).then((res) => {
        res = res.data
        if (res.code === 0 && res.data) {
          console.log(res.data)
          this.username = res.data.consignee
          this.phone = res.data.phone
          this.myAddressProvince = res.data.provinceName
          this.myAddressCity = res.data.cityName
          this.myAddresscounty = res.data.countyName
          this.address = res.data.detailedAddress
          if (res.data.isDefault === 1) {
            this.checkbox = true
          } else {
            this.checkbox = false
          }
        }
      })
    },
    clickAddress () {
      let checkboxData = 0
      if (this.checkbox === true) {
        checkboxData = 1
      } else {
        checkboxData = 0
      }
      if (!this.username) {
        Toast('请填写收货人姓名')
        return false
      }
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
        Toast('请输入正确的手机号')
        return false
      }
      if (!this.address) {
        Toast('请填写详细地址')
        return false
      }
      if (this.$route.query.addressId) {
        axios.get('/meimai/interface/address/updateAddress', {
          params: {
            addressId: this.$route.query.addressId,
            memberId: this.$store.state.userId,
            consignee: this.username,
            phone: this.phone,
            areaFullName: this.myAddressProvince + this.myAddressCity + this.myAddresscounty,
            detailAddress: this.address,
            isDefault: checkboxData
          }
        }).then(() => {
          this.$router.push('/user-address')
        })
      } else {
        axios.get('/meimai/interface/address/saveAddress', {
          params: {
            memberId: this.$store.state.userId,
            consignee: this.username,
            phone: this.phone,
            areaFullName: this.myAddressProvince + this.myAddressCity + this.myAddresscounty,
            detailAddress: this.address,
            isDefault: checkboxData
          }
        }).then(() => {
          this.$router.push('/user-address')
        })
      }
    },
    onValuesChange (picker, values) {
      if (myaddress[values[0]]) {
        picker.setSlotValues(1, Object.keys(myaddress[values[0]]))
        picker.setSlotValues(2, myaddress[values[0]][values[1]])
        this.myAddressProvince = values[0]
        this.myAddressCity = values[1]
        if (values[2]) {
          this.myAddresscounty = values[2]
        } else {
          this.myAddresscounty = '其他'
        }
      }
    },
    clickPicker () {
      this.isPicker = !this.isPicker
    }
  },
  mounted () {
    if (this.$route.query.addressId) {
      this.getInfo()
    }
    this.$nextTick(() => {
      this.myAddressSlots[0].defaultIndex = 0
    })
  }
}
</script>

<style lang="stylus" scoped>
.address >>> .mint-switch-input:checked + .mint-switch-core
  border-color: #ef4f4f;
  background-color: #ef4f4f;
.address
  background-color: #f3f3f3
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0.98rem
  .ispicker
    background: rgba(0, 0, 0, .7)
    position: absolute
    top: 0
    width: 100%
    bottom: 0
    z-index: 1
    .picker
      background: #fff
      margin-top: 50%
</style>
